:root {
    --background-color: whitesmoke;
    --gap: 32px;
    --desktop: calc(960px+ 2 * 32px);
    --widescreen: 1152px;
    --fullhd: 1344px;
    --footer-background-color: var(--background-color);
    --primary: turquoise;
    --info: cyan;
    --ms-bases: 0.75;
    --ms-ratios: 1.3333;
}


/* 960 + 2 * 32 */


/* st stands for smaller thant, bt stands for bigger than */

@custom-media --st-mobile screen and (max-width: 769px);
@custom-media --bt-mobile screen and (min-width: 769px);
@custom-media --st-desktop screen and (max-width: 1024px);
@custom-media --bt-desktop screen and (min-width: 1024px);

/* 1152 + 2 * 32 */

@custom-media --st-widescreen screen and (max-width: 1216px);
@custom-media --bt-widescreen screen and (min-width: 1216px);

/* 1344 + 2 * 32 */

@custom-media --st-fullhd screen and (max-width: 1408px);
@custom-media --bt-fullhd screen and (min-width: 1408px);

